<template>
	<div class="login">
		<div class="inputlogin">
			<div class="leftbox">
				
			</div>
			<div class="rightbox">
				<div class="rightboxcontent">
					<h3>运营登录</h3>
					<!-- 账号密码登录 -->
					<ul class="dltable">
						<li :class="tabactive==1?'hover':''" @click="tabszh(1)">账号密码登录</li>
					</ul>
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
						    <el-form-item prop="username">
								<div class="yanzmToget1">
									<div class="formTitle1">账号：</div>
									<el-input clearable v-model="ruleForm.username" placeholder="账号"></el-input>
								</div>
							</el-form-item>
						    <el-form-item prop="password">
								<div class="yanzmToget">
									<div class="formTitle1">密码：</div>
									<el-input clearable v-model="ruleForm.password" show-password placeholder="密码"></el-input>
								</div>
							</el-form-item>
						</el-form>
						<div class="opts">
						    <div class="forget" style="float:right;"><el-button type="text" @click="$router.push('/forgetpw')">忘记密码</el-button></div>
						</div>
						<div class="attentionStyle" v-if="attentionIshow"><i class="el-icon-warning"></i>{{attentionInfo}}</div>
						<el-button class="buttonlogin" type="primary" @click="submitForm"  @keyup.enter="keyDown(e)">登 录</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {encrypt,decrypt} from '../../utils/cryptojs'
	import {Getloginteacher} from '../../api/api.js'
	import{errorBookLogin} from '../../api/scoreapi'
	export default{
		data(){
			var validatePhone = (rule,value,callback)=>{
				if(value == ''){
					callback(new Error('请输入手机号'))
				}else{
					if(value !==''){
						var reg = /^1[13456789]\d{9}$/;
						if(!reg.test(value)){
							callback(new Error('手机号输入错误'))
						}else{
							//手机号码输入正确时才可点击获取验证码按钮
							this.codeDisabled = false;
						}
					}
					callback();
				}	
			}
			var validatePhone1 = (rule,value,callback)=>{
				if(value == ''){
					callback(new Error('请输入手机号'))
				}else{
					if(value !==''){
						var reg = /^1[13456789]\d{9}$/;
						if(!reg.test(value)){
							callback(new Error('手机号输入错误'))
						}
					}
					callback();
				}
					
			}
			return{
				checked: false,
				input1:'',
				input2:'',
				attentionInfo:'',
				attentionIshow:false,
				ruleForm: {
				    username: '',
				    password: ''
				},
				rules: {
				    // userNumber: [{  validator: validatePhone1, trigger: 'change' }],
					username: [{  required: true, message: '请输入账号', trigger: 'change' }],
				    password: [{ required: true, message: '请输入密码', trigger: 'change' }]
				},
				tabactive:1
			}
		},
		mounted() {
			// 绑定监听事件
			// window.addEventListener("keydown", this.keyDown);
			// var num = 1000.1
			// let str = num.toString();
			// let reg = /^[0-9]+(.[0-9]{1})?$/
			// if(str.indexOf(".")>-1){
			// 	if(reg.test(str)){
			// 		let reg1 = /^\d+\.5$/
			// 		if(!reg1.test(str)){
			// 			console.info('3333')
			// 		}
			// 	}
			// }
		},
		methods:{
			tabszh(num){
				this.tabactive = num	
			},
			// 账号密码登录
			submitForm() {
			    // const self = this;
			    this.$refs.ruleForm.validate(valid => {
			      if (valid) {
			        Getloginteacher(this.ruleForm).then(res=>{
			          if(res.code == 0){
			            // 加密数据
			            let userinfo = res.obj
						let tokenInfo = {
							token: userinfo.authorization,
							uid: userinfo.id,
							username: userinfo.username
						}
						localStorage.setItem('tokenInfo', JSON.stringify(tokenInfo))
			            const encryptData = encrypt(JSON.stringify(userinfo))
			            //存储加密的
			            localStorage.setItem('accessToken', encryptData);
						this.attentionIshow = false
						sessionStorage.setItem('menuState', 3)
						// if (userinfo.id == 47) {
						// 	this.$router.push('/wrongTitleInTheBackground')
						// } else {
						// 	this.$router.push('/selectexam')
						// }
						let obj = {
							userName: this.ruleForm.username,
							pwd: this.ruleForm.password
						}
						errorBookLogin(obj).then(ress => {
							if (ress.code == 0) {
								if (ress.data.roleName == '错题本运营' || ress.data.roleName.indexOf('教研') > -1) {
									this.$router.push('/wrongTitleInTheBackground')	
								} else {
									this.$router.push('/projectmanage')
								}
								let str = JSON.stringify(ress.data)
								localStorage.setItem('role',str)
								// if (ress.data.roleId == 40) {
								// 	this.$router.push('/wrongTitleInTheBackground')
								// } else {
								// 	this.$router.push('/selectexam')
								// }
							}
						})
			          }else{
			            this.attentionInfo = res.msg
			            this.attentionIshow = true
			          }
			        })
			      }
			  })
			},
			keyDown(e){
				if (e.keyCode == 13 || e.keyCode == 108) {
					if(this.tabactive == 1){
						this.submitForm1()
					}else{
						this.onSubmit(); 
					}
					
				}
			},
		},
		destroyed() {
			// 销毁事件
			window.removeEventListener("keydown", this.keyDown, false);
		},
	}
</script>

<style scoped>
	.login{
		/* width:100vw; */
		min-width:1200px;
		height:100vh;
		background:url(../../assets/image/loginbox.png) no-repeat center center;
		background-size:cover;
	}
	.inputlogin{
		box-sizing: border-box;
		width: 65%;
		min-width:964px;
		height: 80%;
		background: #FFFFFF;
		box-shadow: 0px 13px 35px 0px rgba(60,105,177,0.59);
		border-radius: 58px;
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
		/* padding:60px 70px 0; */
		text-align: left;
		display: flex;
	}
	.leftbox,.rightbox{
		box-sizing:border-box;
		flex:1;
	}
	.leftbox{
		background:url(../../assets/image/logincontent.png) no-repeat left top;
		background-size:cover;
		border-radius:58px 0 0 58px;
	}
	.rightboxcontent{
		padding:120px 78px 0;
	}
	.inputlogin h3{
		font-size:38px;
		color:#101010;
		margin-bottom:50px;
		text-align: center;
		font-weight: 600;
	}
	.inputlogin h3 span{
		font-weight: normal;
		display: block;
		/* padding-bottom: */
	}
	.inputlist{
		display: flex;
		padding-top:30px;
	}
	.wordinput{
		width:90px;
		line-height:40px;
		text-align: right;
	}
	.yanzmToget1 >>> .el-input__inner{
		border-radius: 100px;
		border:solid 1px #2379F6;
	}
	.yanzmToget >>> .el-input__inner{
		border-radius: 100px;
		border:solid 1px #2379F6;
	}
	.buttonlogin{
		width:100%;
		height: 50px;
		border-radius: 100px;
		background-color: #2379F6;
		color: rgba(255, 255, 255, 100);
		border:none;
		margin:40px 0 20px;
	}
	.yanzmToget{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.yanzmToget1{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.yanzmToget .formTitle,.formTitle1{
		position: relative;
	}
	.yanzmToget .formTitle,.yanzmToget1 .formTitle{
		width:80px;
	}
	.yanzmToget .formTitle1,.yanzmToget1 .formTitle1{
		width:60px;
	}
	.yzm{
		position:absolute;
		right:0;
		top:0;
		padding:0;
		line-height:38px;
	}
	.yanzmToget >>> .el-button.is-disabled.el-button--text{
		background-color: #2379F6;
		color:#fff;
		width:108px;
		border-radius:100px;
	}
	.yanzmToget >>> .el-button--text{
		background-color:#2379F6;
		color:#fff;
		width:108px;
		border-radius:100px;
	}
	/* .yzm:before{
		content: '';
		width:1px;
		height:18px;
		background:#ccc;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	} */
	.inputlogin >>> .el-form-item__error{
		padding-left:0px;
	}
	.attentionStyle{
		font-size:12px;
		color:red;
		/* padding-left:70px; */
	}
	.attentionStyle i{
		display: inline-block;
		padding-right:6px;
		font-size:14px;
	}
	.dltable{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom:25px;
	}
	.dltable li{
		padding:0 28px 35px;
		cursor: pointer;
		font-size:18px;
	}
	.dltable li.hover,.dltable li:hover{
		color:#619CF5;
	}
	.forget >>> .el-button{
		padding:0;
	}
</style>
